<template>
    <div>
      <city-header/>
      <city-search :cities="cities"/>
      <city-list :cities="cities" :hotCities="hotCities"/>
    </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header.vue'
import CitySearch from './components/Search.vue'
import CityList from './components/List.vue'

export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList
  },
  data () {
    return {
      // city: '',
      cities: {},
      hotCities: []
    }
  },
  mounted () {
    this.getCityInfo()
  },
  methods: {
    getCityInfo () {
      axios.get('/api/city.json')
        .then(this.getCityInfoSucc)
    },
    getCityInfoSucc (ref) {
      const citysData = ref.data.data
      // console.log(citysData)
      // this.city = citysData.city
      this.cities = citysData.cities
      this.hotCities = citysData.hotCities
    }
  }
}
</script>

<style scoped>

</style>
